<template>
  <view class="page-container bg-ff">
    <view class="border-b-1 border-dd relative top10"></view>
    <swiper class="page-body" :current="currentIndex" @change="onSwiperChange">
      <swiper-item v-for="(item, index) in list" :key="index">
        <view v-if="index<=currentIndex+2 && index>=currentIndex-2">
          <view class="py-32 px-24 font-32 lh-48">
            <text>{{index+1}}、</text>
            <image :src="questionType[item.subjectType]" class="w-72 h-34 relative top-6 right-4" />{{ item.content }}
          </view>
          <view v-for="(value, label, index) in item.options" :key="index" @click="onRadioChange(label)">
            <view class="py-32 px-24 bg-ff flex items-center" :class="{'bg-f7':index%2 ===0}">
              <image src="/static/images/success.png" class="icon-40" v-if="label==item.answer"></image>
              <image src="/static/images/error.png" class="icon-40" v-if="label==item.down&&label!=item.answer"></image>
              <view class="border border-dd icon-40 rounded-full flex items-center justify-center" v-if="(label!=item.down&&label!=item.answer)|| (!item.down&&label !=item.answer)">{{label}}</view>
              <view class="flex-1 pl-24" :class="{'text-FF1515':label==item.down&&label!=item.answer, 'text-00EE77':(item.down&&label==item.answer)|| label==item.answer}">{{value}}</view>
            </view>
          </view>
          <view class="pt-48" >
            <view class="box-shadows p-24 bg-ff rounded-12 flex items-center justify-around">
              <view>
                <view class="text-center text-77">参考答案</view>
                <view class="text-center text-success">{{list[currentIndex]?.answer}}</view>
              </view>
              <view >
                <view class="text-center text-77">您的答案</view>
                <view class="text-center">{{list[currentIndex]?.down || '--'}}</view>
              </view>
              <view>
                <view class="text-center text-77">试题难度</view>
                <view class="text-center text-primary">{{levelType[list[currentIndex]?.difficultyLevel]}}</view>
              </view>
            </view>
          </view>
          <view class="pt-32 pb-12 px-24 text-77" v-if="list[currentIndex]?.answerExplain">
            <view class="flex items-center font-28 text-00 mb-24">
              <view class="h-24 w-6 bg-primary mr-10 "></view>
              试题解析
            </view>
            <view class="pl-12 font-26 text-3f">{{list[currentIndex]?.answerExplain}}</view>
          </view>
        </view>
      </swiper-item>
    </swiper>
    <view class="box-shadows flex items-center justify-between px-32">
      <view class="flex items-center font-28 text-success py-32" @click="showDialog=true">
        <image src="/static/images/q_answer_sheet_right.png" class="icon-36 mr-12"/>
        {{successCount.length}}
      </view>
      <view class="flex items-center font-28 text-FF1515 py-32" @click="showDialog=true">
        <image src="/static/images/q_answer_sheet_wrong.png" class="icon-36 mr-12"/>
        {{errorCount.length}}
      </view>
      <view class="flex items-center font-28 py-32" @click="showDialog=true">
        <image src="/static/images/q_answer_sheet_number.png" class="icon-36 mr-12"/>
        {{currentIndex+1}}/{{list.length}}
      </view>
    </view>
    <u-popup :show="showDialog" @close="showDialog=false" :round="10">
      <view class="p-32">
        <view class="flex items-center justify-between ">
          <view class="flex items-center font-28 text-success " @click="showDialog=false">
            <image src="/static/images/q_answer_sheet_right.png" class="icon-36 mr-12"/>
            {{successCount.length}}
          </view>
          <view class="flex items-center font-28 text-FF1515 " @click="showDialog=false">
            <image src="/static/images/q_answer_sheet_wrong.png" class="icon-36 mr-12"/>
            {{errorCount.length}}
          </view>
          <view class="flex items-center font-28 " @click="showDialog=false">
            <image src="/static/images/q_answer_sheet_number.png" class="icon-36 mr-12"/>
            {{currentIndex+1}}/{{list.length}}
          </view>
        </view>
      </view>
      <scroll-view class="min-h-700 max-h-900" scroll-y>
        <view class="grid-box6 px-32 pb-32">
          <view class="w-100 h-100 border border-dd rounded-full flex items-center justify-center" @click="currentIndex=index;showDialog=false" v-for="(item, index) in list" :key="index"
                :class="{
             'border-fb9191 color-fb9191 bg-fedddd':item.down&&item.down!=item.answer,
              'border-72dd70 color-72dd70 bg-daf6da':item.down==item.answer,
              'border-87 text-primary':index===currentIndex,
           }"
          >
            <view class="">{{index+1}}</view>
          </view>
        </view>
      </scroll-view>
    </u-popup>
  </view>
</template>
<script setup>
import { ref} from 'vue'
import {onLoad} from "@dcloudio/uni-app"
import  {subject} from '@/api'
import useUserStore from '@/store/user.js'
const useStore = useUserStore()
import useExam from '@/common/useExam.js'
const {
  isotype,
  categoryId,
  count,
  currentIndex,
  list,
  questionType,
  levelType,
  errorCount,
  successCount,
  showDialog,
} = useExam();
const notify = ref(null)
onLoad( async (options) => {
  console.log(options)
  if (options && options.id) {
    categoryId.value = options.id
    await getQuestions()
  }
})

// 更改swiper当前项的回调
function onSwiperChange(e) {
  currentIndex.value = e.detail.current
}
// 单选题选项选择的回调
function onRadioChange(label) {
  return
}
//获取当前题目
const getQuestions = async () => {
  const res = await  subject.getSubjectRecordHistory({simulatedExamId:categoryId.value })
  if (res.code === 0) {
    count.value = res.count || 0
    list.value = res.data || []
    list.value = list.value.map(item => {
      return convertToObj2Format(item)
    })
    console.log('题目列表', list.value)
  }
}
// 定义一个函数来转换对象格式
function convertToObj2Format(obj) {
  const options = {}
  let choiceKey
  for (let i = 65; i <= 74; i++) { // ASCII码 A(65) 到 J(74)
    choiceKey = `choice${String.fromCharCode(i)}`
    if (obj[choiceKey]) {
      options[String.fromCharCode(i)] = obj[choiceKey]
    }
  }
  return {
    answerExplain: obj.answerExplain,
    categoryId: obj.categoryId,
    options: options,
    content: obj.content,
    difficultyLevel: obj.difficultyLevel,
    score: obj.score,
    standardAnswer: obj.standardAnswer,
    status: obj.status,
    subjectId: obj.subjectId,
    subjectType: obj.subjectType,
    answer: obj.standardAnswer || '--',
    id: obj.id,
    down: obj.answer ,
  }
}
</script>
<style scoped lang="scss">
.top10{
  top: -6rpx;
}
</style>